<template>
  <div id="roomlist">
    <header div class="head">
        <div class="back" @click="$router.go(-1)">
        <mu-icon value="chevron_left"  />
        </div>
        <div class="head_text">
            房间列表
        </div>
        <div class="flex1"></div>
    </header>
    <div class="homeList fixed-bottom">
      <ul>
        <li class="border_blue padding10"  v-for="(item,index) in hostdatalist">
          <router-link :to="{path:'hostroominfo',query:{roomId:item.roomId}}" class="fs_flex">
            <div class="fs_flex2 imgH"><img v-bind:src="baseUrl+item.thumbUrl" ></div>
            <div class="fs_flex8 black">
              <p>{{item.roomTitle}}</p>
              <p>{{item.roomTitleEn}}</p>
              <p>{{item.province}}{{item.city}}{{item.district}}</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  //require('../../assets/css/personalcenter.scss'); //引入的scss
  import {
    mapState,
    mapGetters,
    mapMutations,
    mapActions
    } from 'vuex'
  export default {
    name: 'roomlist', //组件的名字
    data() {
    return { //数据
      msg: 'roomlist',
      baseUrl: $.hsf.baseUrl
    }
  },
  methods: { //方法
    ...mapActions(['gethostdatalist'])
  },
  computed: { //计算 用来引入vuex里面state
    ...mapState(['hostdatalist'])
  },
  mounted: function() { //组件加载完成
    let infos = {rows:100,page:1,startRowNum:1};
    this.gethostdatalist(infos);
  },
  watch: { //健康某个数据变化后触发某个事件

  },
  destroyed: function() { //离开这个组件
  },
  components: {

  }

  }
</script>
<style scoped>
  .fs_flex2{
    height: 60px;
  }
  .border_blue{
    border: 1px solid #5b9bd5;
  }
  .homeList ul li{
    margin-bottom:20px;
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
